<template>
  <div>
    <h3>Person组件的人数总和为:{{persons.length}}</h3>
    <h3>加减后的值:{{sum}}</h3>
    <h4>放大10倍后的值:{{bigSum}}</h4>
    <select v-model.number="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和是奇数再+</button>
    <button @click="incrementWait(num)">等等再+</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "Count",
  data(){
    return{
      num:1,
    }
  },
  computed:{
/*    //借助mapState生成计算属性需要从state中拿到的数据(对象写法)
    ...mapState({sum:'sum'}),
    //借助mapGetters生成计算属性需要从getters里面拿数据(对象写法)
    ...mapGetters({bigSum:'bigSum'})*/
    //借助mapState生成计算属性需要从state中拿到的数据(数组写法)
    ...mapState('countOptions',['sum']),
    ...mapState('personOptions',['persons']),
    //借助mapGetters生成计算属性需要从getters里面拿数据(数组写法)
    ...mapGetters('countOptions',['bigSum'])
  },
  methods:{
/*    increment(){
      this.$store.commit('plus',this.num)
    },
    decrement(){
      this.$store.commit('sub',this.num)
    },*/
    //使用mapMutations调用commit()联系mutations--->template中需要传参
    ...mapMutations('countOptions',{increment:'plus',decrement:'sub'}),
    /*incrementOdd(){
      this.$store.dispatch('oddPlus',this.num)
    },
    incrementWait(){
      this.$store.dispatch('waitPlus',this.num)
    }*/
    //使用mapActions调用dispatch()联系actions--->template中需要传参
    ...mapActions('countOptions',{incrementOdd:'oddPlus',incrementWait:'waitPlus'})
  },
  mounted() {
    // console.log("Count",this)
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>